<template>
  <div>
    <a-form :model="formState" ref="formDataRef" name="basic" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
      <a-form-item label="上传文件" name="file" :rules="[{ required: true, message: '请上传文件!' }]">
        <a-upload v-model:fileList="formState.file" name="file" :customRequest="uploadRequestHandle">
          <a-button>上传</a-button>
        </a-upload>
      </a-form-item>
      <a-form-item label="模版下载">
        <a-button type="link" @click="downloadTemplateHandle">下载导入模板</a-button>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }" class="submit-btn-form-item">
        <a-button type="primary" html-type="submit" :loading="submitLoading" v-debounce>确定</a-button>
        <a-button @click="resetHandle">取消</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import InitHook from "./composables/InitHook";
import OperationHook from "./composables/OperationHook";

const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();

const { formState, formDataRef, submitLoading } = InitHook();
const { resetHandle, onFinishFailed, onFinish, downloadTemplateHandle, uploadRequestHandle } = OperationHook({
  submitLoading,
  formState,
  formDataRef,
  emit
});
</script>
<style lang="stylus" scoped>
:deep(.ant-upload-span){
  margin-top: 15px;
  font-size: 16px;
}
</style>
